<template>
  <div class="all">
    <div class="top_bar">
      <TrainTopBar/>
    </div>

    <div class="all_content">
      <div class="content">
<!--        用户界面-->
        <div class="left_content">
          <div class="left_content_top">
            <div class="left_content_top_top">
              <div class="map_title">曲靖市辖区乡镇区域位置训练地图</div>
              <div class="map_info info_1">训练人：{{username}}</div>
              <div class="map_info info_2">训练时长：不限</div>
              <div class="map_info info_3">训练分数：无</div>
            </div>
            <div class="left_content_top_bottom">
              <div class="mode_info">
                <div class="mode_info_tip">
                  <span>注意事项：</span>
                  <p>1.最上方导航条置有完整地图链接以及各县区乡镇情况概括，可进行参考；</p>
                  <p>2.训练模式包含四项地图测验，难度依次递增，点击右边对应模块即可进入。</p>
                </div>
                <div class="mode_info_content">
                  <p>{{module_text}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="left_content_bottom">
            <yunnanProvinceMap/>
          </div>
        </div>


<!--        交互地图-->
        <div class="model_map">
          <div class="model_select" v-if="!mode_is_show">
            <div class="model_select_title">训练模式选择</div>
            <div class="model_select_content">
              <div class="model_select_content_select">
<!--                模式列表-->
                    <div class="mode_select_in_1" @mousemove="set_text_1" @mouseout="set_text_info"  @click="module_1_select">
                      <div class="mode_select_in_title">随机位置测验</div>
                      <div class="mode_select_in_level">难度指数
                        <i class="icon-nanduzhishu iconfont" v-for="i in 5" :key="i"></i>
                      </div>
                      <div class="mode_select_in_content">
                        <img src="@/assets/train_img/mode_bg1.png" alt="">
                      </div>
                    </div>

                    <div class="mode_select_in_2"  @mousemove="set_text_2" @mouseout="set_text_info"  @click="module_2_select">
                      <div class="mode_select_in_title">名称定位测验</div>
                      <div class="mode_select_in_level">难度指数
                        <i class="icon-nanduzhishu iconfont" v-for="i in 5" :key="i"></i>
                      </div>
                      <div class="mode_select_in_content">
                        <img src="@/assets/train_img/mode_bg2.png" alt="">
                      </div>
                    </div>

                    <div class="mode_select_in_3"  @mousemove="set_text_3" @mouseout="set_text_info"  @click="module_3_select">
                      <div class="mode_select_in_title">县区概况测验</div>
                      <div class="mode_select_in_level">难度指数
                        <i class="icon-nanduzhishu iconfont" v-for="i in 5" :key="i"></i>
                      </div>
                      <div class="mode_select_in_content">
                        <img src="@/assets/train_img/mode_bg3.png" alt="">
                      </div>
                    </div>

                    <div class="mode_select_in_4"  @mousemove="set_text_4" @mouseout="set_text_info"  @click="module_4_select">
                      <div class="mode_select_in_title">试题模式</div>
                      <div class="mode_select_in_level">难度指数
                        <i class="icon-nanduzhishu iconfont" v-for="i in 5" :key="i"></i>
                      </div>
                      <div class="mode_select_in_content">
                        <img src="@/assets/train_img/mode_bg4.png" alt="">
                      </div>
                    </div>
              </div>
            </div>

          </div>
          <router-view v-if="mode_is_show"></router-view>
        </div>

      </div>
    </div>



    <!--    退出按钮确认弹窗-->
    <div class="exit_sure" v-if="exit_sure_status">
      <div class="exit_sure_content">
        <div class="exit_sure_content_tip">注意！</div>
        <div class="exit_sure_content_text">{{username}}，您好！<br>
          <p>是否退出当前训练，训练记录不会进行保存！</p>
        </div>
        <div class="exit_sure_content_buttons">
          <div class="exit_sure_content_button" @click="returnToanswer">返回训练</div>
          <div class="exit_sure_content_button" @click="exit">立即退出</div>
        </div>
      </div>
    </div>


    <!--完整训练地图-->
    <div class="complete_map" v-if="complete_map_is_show">
      <div class="complete_map_title">曲靖市下辖县区及乡镇边界图（仅供参考）</div>
      <div class="complete_map_shutdown" @click="complete_map_shutdown">
        <!-- &times; -->
         <i class="icon-tuichu iconfont"></i>
      </div>
      <div class="complete_map_content">
        <div class="complete_map_content_left_info">
          <div class="complete_map_content_left_info_text">
            <p><strong>截至2025年，云南省曲靖市下辖3个区、1个县级市、5个县，共9个县级行政区</strong></p>
            <p><strong>1. 麒麟区</strong>（{{show_county_town_data_compplete.qilin.jiedao.length}}街{{show_county_town_data_compplete.qilin.zhen.length}}镇{{show_county_town_data_compplete.qilin.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.qilin.jiedao.length}}个）：</span> 
                <i v-for="(value,index) in show_county_town_data_compplete.qilin.jiedao" :key="'1'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.qilin.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.qilin.zhen" :key="'2'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.qilin.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.qilin.xiang" :key="'3'+index">{{ value }}、</i>
            </p>
            <p> <strong>2.沾益区</strong>（{{show_county_town_data_compplete.zhanyi.jiedao.length}}街{{show_county_town_data_compplete.zhanyi.zhen.length}}镇{{show_county_town_data_compplete.zhanyi.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.zhanyi.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.zhanyi.jiedao" :key="'4'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.zhanyi.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.zhanyi.zhen" :key="'5'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.zhanyi.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.zhanyi.xiang" :key="'6'+index">{{ value }}、</i>
            </p>
            <p> <strong>3.马龙区</strong>（{{show_county_town_data_compplete.malong.jiedao.length}}街{{show_county_town_data_compplete.malong.zhen.length}}镇{{show_county_town_data_compplete.malong.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.malong.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.malong.jiedao" :key="'7'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.malong.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.malong.zhen" :key="'8'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.malong.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.malong.xiang" :key="'9'+index">{{ value }}、</i>
            </p>
            <p> <strong>4.宣威市</strong>（{{show_county_town_data_compplete.xuanwei.jiedao.length}}街{{show_county_town_data_compplete.xuanwei.zhen.length}}镇{{show_county_town_data_compplete.xuanwei.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.xuanwei.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.xuanwei.jiedao" :key="'10'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.xuanwei.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.xuanwei.zhen" :key="'11'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.xuanwei.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.xuanwei.xiang" :key="'12'+index">{{ value }}、</i>
            </p>
            <p><strong>5.富源县</strong>（{{show_county_town_data_compplete.fuyuan.jiedao.length}}街{{show_county_town_data_compplete.fuyuan.zhen.length}}镇{{show_county_town_data_compplete.fuyuan.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.fuyuan.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.fuyuan.jiedao" :key="'13'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.fuyuan.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.fuyuan.zhen" :key="'14'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.fuyuan.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.fuyuan.xiang" :key="'15'+index">{{ value }}、</i>
            </p>
            <p> <strong>6.罗平县</strong>（{{show_county_town_data_compplete.luoping.jiedao.length}}街{{show_county_town_data_compplete.luoping.zhen.length}}镇{{show_county_town_data_compplete.luoping.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.luoping.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.luoping.jiedao" :key="'16'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.luoping.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.luoping.zhen" :key="'17'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.luoping.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.luoping.xiang" :key="'18'+index">{{ value }}、</i>
            </p>
            <p> <strong>7.师宗县</strong>（{{show_county_town_data_compplete.shizong.jiedao.length}}街{{show_county_town_data_compplete.shizong.zhen.length}}镇{{show_county_town_data_compplete.shizong.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.shizong.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.shizong.jiedao" :key="'19'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.shizong.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.shizong.zhen" :key="'20'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.shizong.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.shizong.xiang" :key="'21'+index">{{ value }}、</i>
            </p>
            <p> <strong>8.陆良县</strong>（{{show_county_town_data_compplete.luliang.jiedao.length}}街{{show_county_town_data_compplete.luliang.zhen.length}}镇{{show_county_town_data_compplete.luliang.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.luliang.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.luliang.jiedao" :key="'22'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.luliang.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.luliang.zhen" :key="'23'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.luliang.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.luliang.xiang" :key="'24'+index">{{ value }}、</i>
            </p>
            <p> <strong>9.会泽县</strong>（{{show_county_town_data_compplete.huize.jiedao.length}}街{{show_county_town_data_compplete.huize.zhen.length}}镇{{show_county_town_data_compplete.huize.xiang.length}}乡）<br>
              <span>街道（{{show_county_town_data_compplete.huize.jiedao.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.huize.jiedao" :key="'25'+index">{{ value }}、</i>
              <br>
              <span>镇（{{show_county_town_data_compplete.huize.zhen.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.huize.zhen" :key="'26'+index">{{ value }}、</i>
              <br>
              <span>乡（{{show_county_town_data_compplete.huize.xiang.length}}个）：</span>
                <i v-for="(value,index) in show_county_town_data_compplete.huize.xiang" :key="'27'+index">{{ value }}、</i>
            </p>
            <p> <strong>综述，曲靖市共有
              {{ show_county_town_data_compplete.huize.xiang.length + show_county_town_data_compplete.huize.zhen.length + show_county_town_data_compplete.huize.jiedao.length
              + show_county_town_data_compplete.xuanwei.xiang.length + show_county_town_data_compplete.xuanwei.zhen.length + show_county_town_data_compplete.xuanwei.jiedao.length
              + show_county_town_data_compplete.zhanyi.xiang.length + show_county_town_data_compplete.zhanyi.zhen.length + show_county_town_data_compplete.zhanyi.jiedao.length
              + show_county_town_data_compplete.qilin.xiang.length + show_county_town_data_compplete.qilin.zhen.length + show_county_town_data_compplete.qilin.jiedao.length
              + show_county_town_data_compplete.malong.xiang.length + show_county_town_data_compplete.malong.zhen.length + show_county_town_data_compplete.malong.jiedao.length
              + show_county_town_data_compplete.fuyuan.xiang.length + show_county_town_data_compplete.fuyuan.zhen.length + show_county_town_data_compplete.fuyuan.jiedao.length
              + show_county_town_data_compplete.luliang.xiang.length + show_county_town_data_compplete.luliang.zhen.length + show_county_town_data_compplete.luliang.jiedao.length
              + show_county_town_data_compplete.luoping.xiang.length + show_county_town_data_compplete.luoping.zhen.length + show_county_town_data_compplete.luoping.jiedao.length
              + show_county_town_data_compplete.shizong.xiang.length + show_county_town_data_compplete.shizong.zhen.length + show_county_town_data_compplete.shizong.jiedao.length  
              }}
            个乡镇（街道），其中街道
            {{ 
                show_county_town_data_compplete.huize.jiedao.length
              + show_county_town_data_compplete.xuanwei.jiedao.length
              + show_county_town_data_compplete.zhanyi.jiedao.length
              + show_county_town_data_compplete.qilin.jiedao.length
              + show_county_town_data_compplete.malong.jiedao.length
              + show_county_town_data_compplete.fuyuan.jiedao.length
              + show_county_town_data_compplete.luliang.jiedao.length
              + show_county_town_data_compplete.luoping.jiedao.length
              + show_county_town_data_compplete.shizong.jiedao.length
            }}
            个；镇
             {{ 
               show_county_town_data_compplete.huize.zhen.length
              + show_county_town_data_compplete.xuanwei.zhen.length
              + show_county_town_data_compplete.zhanyi.zhen.length
              + show_county_town_data_compplete.qilin.zhen.length
              + show_county_town_data_compplete.malong.zhen.length
              + show_county_town_data_compplete.fuyuan.zhen.length
              + show_county_town_data_compplete.luliang.zhen.length
              + show_county_town_data_compplete.luoping.zhen.length
              + show_county_town_data_compplete.shizong.zhen.length
             }} 
            个；乡
            {{ 
               show_county_town_data_compplete.huize.xiang.length
              + show_county_town_data_compplete.xuanwei.xiang.length
              + show_county_town_data_compplete.zhanyi.xiang.length
              + show_county_town_data_compplete.qilin.xiang.length
              + show_county_town_data_compplete.malong.xiang.length
              + show_county_town_data_compplete.fuyuan.xiang.length
              + show_county_town_data_compplete.luliang.xiang.length
              + show_county_town_data_compplete.luoping.xiang.length
              + show_county_town_data_compplete.shizong.xiang.length
             }} 
            个。</strong></p>        
          </div>
        </div>
        <div class="complete_map_content_right_map">
          <Complete_TrainMap/>
          <div class="complete_map_content_right_map_tip">温馨提示：鼠标左键点击地图区域下钻当前区域的乡镇地图，再次左键点击回到当前县区</div>
        </div>
      </div>
    </div>



  </div>
</template>


<script>
import TrainTopBar from '@/components/FunctionModulePage/TrainModel/TrainTopBar.vue'
import Complete_TrainMap from '@/components/FunctionModulePage/TrainModel/Complete_TrainMap.vue'
import yunnanProvinceMap from '@/components/FunctionModulePage/TrainModel/yunnanProvinceMap.vue'

export default{
  name:'TrainPage',
  data(){
    return{
      module_1_title:'随机位置测验',
      module_1_text:'系统给出某县区的完整全貌边界地图，随机高亮某乡镇，用户需判断出当前高亮乡镇的名称并填入，此模式训练用户掌握各个县区的边界轮廓范围以及乡镇所处的位置。',
      module_2_title:'名称定位测验',
      module_2_text:'系统随机某乡镇名，要求用户找到该乡镇所处的具体位置，此模式训练用户掌握曲靖市内各个乡镇所处位置。',
      module_3_title:'县区概况测验',
      module_3_text:'系统给出曲靖市的完整全貌边界地图，随机高亮某县区，用户需了解该县区的名称，所辖街道、乡镇名称以及数量。',
      module_4_title:'县区概况测验',
      module_4_text:'系统随机给出乡镇，要求用户作答出该乡镇所属的县（区），要求用户对曲靖市各个县区的乡镇都能有所了解。',
      module_text:'请选择测验模式进入',
      // module_title:'请在左侧选择训练模式',

      county_town_data:null,  //训练数据
      topic_nums:0,  //训练题目数量
      topics_list:[],  //题库
      topic_now:null,  //当前题目
      topic_now_num:1, //当前题目索引
      topics_records:[],   //训练记录
      // mode_is_show:false,
      show_county_town_data:{
        huize:[],
        xuanwei:[],
        zhanyi:[],
        malong:[],
        qilin:[],
        fuyuan:[],
        luliang:[],
        luoping:[],
        shizong:[]
      },   //展示在全部地图界面的数据
      show_county_town_data_compplete:{
        huize:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        xuanwei:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        zhanyi:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        malong:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        qilin:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        fuyuan:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        luliang:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        luoping:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
        shizong:{
          xiang:[],
          zhen:[],
          jiedao:[]
        },
      },

    }
  },
  components: {
    TrainTopBar,
    // TrainMap,
    yunnanProvinceMap,
    Complete_TrainMap
  },
  computed:{
    //用户名
    username(){
      // return this.$store.state.response.Name
      // return localStorage.getItem('userinfo').Name
      let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
      // console.log('用户数据：',data.Name)
      return data.user_name
    },
    //退出按钮确认
    exit_sure_status(){
      return this.$store.state.exit_sure_status
    },
    complete_map_is_show(){
      return this.$store.state.open_complete_train_map
    },
    mode_is_show() {
      return this.$store.state.mode_exit_status
    }
  },
  watch:{
    // '$store.state.open_complete_train_map':{
    //   watch(newVal){
    //     this.complete_map_is_show = newVal
    //   }
    // }
  },
  created() {
    //加载随机训练数据
    this.loadCountyTownData()
  },
  beforeDestroy() {
    this.$store.commit('set_mode_exit_status',false)
  },

  methods:{
    //完整地图关闭
    complete_map_shutdown(){
      // this.complete_map_is_show = false
      this.$store.commit('set_open_complete_train_map',false)
    },
    // 加载县区乡镇数据
    async loadCountyTownData() {
      try {
        // 动态导入 JSON 文件（返回 Promise）
        const response = await import('@/assets/json/county_town_data.json');
        this.county_town_data = response.default; //  response（取决于构建工具配置）
        //乡镇数据--传递给县区训练模式
        // console.log('乡镇数据--传递给县区训练模式：',this.county_town_data)
        //this.show_county_town_data = this.county_town_data   //将数据存在在展示列表
        for(let i=0;i<this.county_town_data.length;i++){
          if(this.county_town_data[i].county_name === '会泽县' ){
            this.show_county_town_data.huize = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '宣威市' ){
            this.show_county_town_data.xuanwei = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '沾益区' ){
            this.show_county_town_data.zhanyi = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '马龙区' ){
            this.show_county_town_data.malong = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '麒麟区' ){
            this.show_county_town_data.qilin = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '富源县' ){
            this.show_county_town_data.fuyuan = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '陆良县' ){
            this.show_county_town_data.luliang = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '罗平县' ){
            this.show_county_town_data.luoping  = this.county_town_data[i].towns
          }else if(this.county_town_data[i].county_name === '师宗县' ){
            this.show_county_town_data.shizong = this.county_town_data[i].towns
          }
        }
        // console.log('乡镇数据--展示：',this.show_county_town_data)
        //处理数据到展示可用
        // 遍历原始数据并进行分类
        for(let i=0;i<this.show_county_town_data.huize.length;i++){
          if (this.show_county_town_data.huize[i].endsWith("乡")) {
            this.show_county_town_data_compplete.huize.xiang.push(this.show_county_town_data.huize[i])
          }else if(this.show_county_town_data.huize[i].endsWith("镇")){
            this.show_county_town_data_compplete.huize.zhen.push(this.show_county_town_data.huize[i])
          }else if(this.show_county_town_data.huize[i].endsWith("街道")){
            this.show_county_town_data_compplete.huize.jiedao.push(this.show_county_town_data.huize[i])
          } 
        }
        for(let i=0;i<this.show_county_town_data.xuanwei.length;i++){
          if (this.show_county_town_data.xuanwei[i].endsWith("乡")) {
              this.show_county_town_data_compplete.xuanwei.xiang.push(this.show_county_town_data.xuanwei[i])
          }else if(this.show_county_town_data.xuanwei[i].endsWith("镇")){
            this.show_county_town_data_compplete.xuanwei.zhen.push(this.show_county_town_data.xuanwei[i])
          }else if(this.show_county_town_data.xuanwei[i].endsWith("街道")){
            this.show_county_town_data_compplete.xuanwei.jiedao.push(this.show_county_town_data.xuanwei[i])
          }  
        }
        for(let i=0;i<this.show_county_town_data.zhanyi.length;i++){
          if (this.show_county_town_data.zhanyi[i].endsWith("乡")) {
              this.show_county_town_data_compplete.zhanyi.xiang.push(this.show_county_town_data.zhanyi[i])
          }else if(this.show_county_town_data.zhanyi[i].endsWith("镇")){
            this.show_county_town_data_compplete.zhanyi.zhen.push(this.show_county_town_data.zhanyi[i])
          }else if(this.show_county_town_data.zhanyi[i].endsWith("街道")){
            this.show_county_town_data_compplete.zhanyi.jiedao.push(this.show_county_town_data.zhanyi[i])
          } 
        }
        for(let i=0;i<this.show_county_town_data.malong.length;i++){
          if (this.show_county_town_data.malong[i].endsWith("乡")) {
              this.show_county_town_data_compplete.malong.xiang.push(this.show_county_town_data.malong[i])
          }else if(this.show_county_town_data.malong[i].endsWith("镇")){
            this.show_county_town_data_compplete.malong.zhen.push(this.show_county_town_data.malong[i])
          }else if(this.show_county_town_data.malong[i].endsWith("街道")){
            this.show_county_town_data_compplete.malong.jiedao.push(this.show_county_town_data.malong[i])
          }  
        }
        for(let i=0;i<this.show_county_town_data.qilin.length;i++){
          if (this.show_county_town_data.qilin[i].endsWith("乡")) {
              this.show_county_town_data_compplete.qilin.xiang.push(this.show_county_town_data.qilin[i])
          } else if(this.show_county_town_data.qilin[i].endsWith("镇")){
            this.show_county_town_data_compplete.qilin.zhen.push(this.show_county_town_data.qilin[i])
          }else if(this.show_county_town_data.qilin[i].endsWith("街道")){
            this.show_county_town_data_compplete.qilin.jiedao.push(this.show_county_town_data.qilin[i])
          } 
        }
        for(let i=0;i<this.show_county_town_data.fuyuan.length;i++){
          if (this.show_county_town_data.fuyuan[i].endsWith("乡")) {
              this.show_county_town_data_compplete.fuyuan.xiang.push(this.show_county_town_data.fuyuan[i])
          }else if(this.show_county_town_data.fuyuan[i].endsWith("镇")){
            this.show_county_town_data_compplete.fuyuan.zhen.push(this.show_county_town_data.fuyuan[i])
          }else if(this.show_county_town_data.fuyuan[i].endsWith("街道")){
            this.show_county_town_data_compplete.fuyuan.jiedao.push(this.show_county_town_data.fuyuan[i])
          }  
        }
        for(let i=0;i<this.show_county_town_data.luliang.length;i++){
          if (this.show_county_town_data.luliang[i].endsWith("乡")) {
              this.show_county_town_data_compplete.luliang.xiang.push(this.show_county_town_data.luliang[i])
          }else if(this.show_county_town_data.luliang[i].endsWith("镇")){
            this.show_county_town_data_compplete.luliang.zhen.push(this.show_county_town_data.luliang[i])
          }else if(this.show_county_town_data.luliang[i].endsWith("街道")){
            this.show_county_town_data_compplete.luliang.jiedao.push(this.show_county_town_data.luliang[i])
          }  
        }
        for(let i=0;i<this.show_county_town_data.luoping.length;i++){
          if (this.show_county_town_data.luoping[i].endsWith("乡")) {
              this.show_county_town_data_compplete.luoping.xiang.push(this.show_county_town_data.luoping[i])
          }else if(this.show_county_town_data.luoping[i].endsWith("镇")){
            this.show_county_town_data_compplete.luoping.zhen.push(this.show_county_town_data.luoping[i])
          }else if(this.show_county_town_data.luoping[i].endsWith("街道")){
            this.show_county_town_data_compplete.luoping.jiedao.push(this.show_county_town_data.luoping[i])
          } 
        }
        for(let i=0;i<this.show_county_town_data.shizong.length;i++){
          if (this.show_county_town_data.shizong[i].endsWith("乡")) {
              this.show_county_town_data_compplete.shizong.xiang.push(this.show_county_town_data.shizong[i])
          }else if(this.show_county_town_data.shizong[i].endsWith("镇")){
            this.show_county_town_data_compplete.shizong.zhen.push(this.show_county_town_data.shizong[i])
          }else if(this.show_county_town_data.shizong[i].endsWith("街道")){
            this.show_county_town_data_compplete.shizong.jiedao.push(this.show_county_town_data.shizong[i])
          } 
        }
        // console.log('分类后的数据：',this.show_county_town_data_compplete)
        this.$store.commit('set_all_county_town_data',this.county_town_data)
        //统计数据条数
        for (let i=0;i<this.county_town_data.length;i++){
          for (let j=0;j<this.county_town_data[i].towns.length;j++){
           //统计全市乡镇街道数量
            this.topic_nums++
            // console.log('训练数量：',this.topic_nums)
          }
        }
        //生成随机题目
        this.toggleTopic()
        //测试
        // console.log('训练数据',this.county_town_data)
        // console.log('训练题库',this.topics_list)
      } catch (error) {
        console.error('加载县区乡镇数据失败：', error);
      }
    },
    //生成随机题目存入题库
    toggleTopic(){
      for(let i=0;i<this.topic_nums;i++){
        // 随机县区数据
        const county_random = Math.floor(Math.random() * this.county_town_data.length)
        const random_county = this.county_town_data[county_random]  //random_county为随机的县区
        const town_random = Math.floor(Math.random()*random_county.towns.length)
        // this.examine_answer = random_county.towns[town_random]
        // let question = `请找到${random_county.towns[town_random]}的行政规划区域（在目标区域点击鼠标左键回答）。`
        const currentAnswer = random_county.towns[town_random];  //随机乡镇 答案
        // 检查是否已经存在相同的答案
        const isDuplicate = this.topics_list.some(
          topic => topic.answer === currentAnswer
        );

        if (!isDuplicate) {
          let question = currentAnswer;
          // console.log('题目：', i, '.', currentAnswer);
          this.topics_list.push({
            "height_light": question,
            "belongTo":random_county.county_name,
          }); // 题目加入随机训练题库
        } else {
          console.log('重复题目已跳过：', currentAnswer);
          i--; // 如果重复，重新生成当前题目（注意：避免无限循环）
        }
      }

      // let repeat = ["东山镇"]   //重复乡镇
      // 删除this.topics_list中与repeat相同的元素
      // this.topics_list = this.topics_list.filter(item => !repeat.includes(item));


      console.log('page页面的题库数据：',this.topics_list)
      //题库上传至vuex-----random页面
      this.$store.commit('set_mode_topic',this.topics_list)
    },





    //点击选择模式
    module_1_select(){
      this.mode_show()
      this.$router.replace('/random_mode').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },
    module_2_select(){
      this.mode_show()
      this.$router.replace('/position_by_name_mode').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },
    module_3_select(){
      this.mode_show()
      this.$router.replace('/county_profile_mode').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },
    module_4_select(){
      this.mode_show()
      this.$router.replace('/test_questions_mode').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },

    mode_show(){
      this.$store.commit('set_mode_exit_status',true)
    },
    //设置鼠标移动后模式介绍文字改变
    set_text_1(){
      this.module_text = this.module_1_text
    },
    set_text_2(){
      this.module_text = this.module_2_text
    },
    set_text_3(){
      this.module_text = this.module_3_text
    },
    set_text_4(){
      this.module_text = this.module_4_text
    },
    set_text_info(){
      this.module_text = '请选择测验模式进入'
    },
    //退出
    exit(){
      this.$store.commit('setexit_sure_status',false)
      this.$store.commit('set_mode_exit_status',false)
      this.$router.go(-1)
    },
    returnToanswer(){
      this.$store.commit('setexit_sure_status',false)
    },
  },

}


</script>


<!--<style scoped>-->
<!--  @import '../assets/tcss/TrainPageCSS.css';-->
<!--</style>-->

<style scoped>
  .all{
    width: 100vw;
    height: 100vh;
    //background-color: #6bddb2;
  }
  .top_bar{
    width: 100vw;
    height: 5vh;
    //background-color: #0ae80a;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
    //box-shadow: 1px 1px 1px 1px red;
  }
  .all_content{
    width: 100vw;
    height: 95vh;
    position: absolute;
    top: 5vh;
    background-color: #b5b9bd;
  }
  .content{
    width: 95vw;
    height: 90vh;
    //background-color: rgba(0,0,0,0.2);
    position: relative;
    top: 2.5vh;
    left: calc(50% - 47.5vw);
  }
  .left_content{
    width: 25vw;
    height: 90vh;
    border-radius: 10px;
    box-sizing: border-box;
    //border: 1px dashed black;
    //background-color: #99afc1;
    //overflow: hidden;
  }
  .top_content{
    width: 69vw;
    height: 10vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #99afc1;
    position: absolute;
    top: 0;
    left: 26vw;
    text-align: center;
    line-height: 10vh;
    font-size: 2vw;
  }
  .model_map{
    width: 69vw;
    height: 90vh;
    /*background-color: #99afc1;*/
    border-radius: 10px;
    position: absolute;
    top: 0vh;
    left: 26vw;
    border-radius: 10px;
    overflow: hidden;
    /*border: 1px dashed black;*/
  }
  .model_select{
    width: 69vw;
    height: 90vh;
    text-align: center;
    /*line-height: 90vh;*/
    background-color: #5d25bf;
    /*border-radius: 10px;*/
  }
  .model_select_title{
    width: 69vw;
    height: 10vh;
    background-color: #454647;
    text-align: center;
    line-height: 10vh;
    font-size: 2vw;
    color: white;
    /*border-bottom: 1px dashed black;*/
  }
  .model_select_content{
    width: 69vw;
    height: 80vh;
    background-color:  #565657;
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
    box-sizing: border-box;
  }
  .model_select_content_select{
    width: 64vw;
    height: 75vh;
    /*background-color: #80e2de;*/
    /*box-shadow: 0px 0px 3px black;*/
    position: relative;
    top: 2.5vh;
    left: calc(50% - 32vw);
    box-sizing: border-box;
  }

  .model_select_content_select>div{
    /*border-radius: 10px;*/
    box-sizing: border-box;
    background-color: rgb(24, 24, 26);
    overflow: hidden;
    color: white;
    box-shadow: 0px 0px 3px black;
  }
  .model_select_content_select>div:hover{
    border: 1px solid #e3cc59;
    background-color: rgba(0,0,0,0.5);
  }
  .mode_select_in_1{
    width: 15.8vw;
    height: 75vh;
    /*background-color: #6dbf25;*/
    float: left;
    overflow: hidden;
  }
  .mode_select_in_2{
    width: 15.8vw;
    height: 75vh;
    /*background-color: #f58ad6;*/
    margin-left: 0.2vw;
    float: left;
  }
  .mode_select_in_3{
    width: 15.8vw;
    height: 75vh;
    /*background-color: #d0178c;*/
    /*margin-left: 34.5vw;*/
    margin-left: 0.2vw;
    float: left;
  }
  .mode_select_in_4{
    width: 16vw;
    height: 75vh;
    /*background-color: #e2cd47;*/
    margin-left:48vw;
  }
  .mode_select_in_title{
    width: 16vw;
    height: 5vh;
    box-sizing: border-box;
    line-height: 5vh;
    font-size: 1vw;
    /* background-color: #a0a1a5; */
  }
  .mode_select_in_level{
    width: 16vw;
    height: 3vh;
    box-sizing: border-box;
    line-height: 3vh;
    text-align: left;
    font-size: 0.8vw;
    position: relative;
    /* left: 1vw; */
    text-align: center;
    /* background-color: #2de3af; */
  }
  .mode_select_in_content{
    width: 16vw;
    height: 67vh;
    /*background-color: #e2cd47;*/
  }
  .mode_select_in_content img{
    width: 100%;
    height: 100%;
    filter:
      brightness(1)
      invert(1)
      drop-shadow(0 0 0 rgb(56, 55, 55))
    opacity(0.1)

  }
  .model_select_content_select i{
    color: #fdfbfb;
  }
  .mode_select_in_1 i:nth-child(-n+1){
    color: yellow;
  }
  .mode_select_in_2 i:nth-child(-n+2){
    color: yellow;
  }
  .mode_select_in_3 i:nth-child(-n+3){
    color: yellow;
  }
  .mode_select_in_4 i:nth-child(-n+1){
    color: yellow;
  }


  .bottom_left_content{
    width: 29vw;
    height: 78vh;
    background-color: #99afc1;
    position: absolute;
    top: 12vh;
    left: 26vw;
    overflow: hidden;
  }
  .bottom_right_content{
    width: 39vw;
    height: 78vh;
    /* background-color: #3e6388; */
    position: absolute;
    top: 12vh;
    left: 56vw;
  }


  .left_content:hover  .module_select{
    cursor:pointer;
    width: 100%;
  }






.exit_sure{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
}

.exit_sure_content{
    width: 20vw;
    height: 17vh;
    background-color: #7a8a96;
    position: relative;
    top: 30vh;
    left: calc(50% - 7.5vw);
    border-radius: 15px;
    overflow: hidden;
    /*font-size: clamp(7px,0.45vw,16px);*/
    font-size: 0.6vw;
    box-shadow: 2px 2px 2px 2px rgb(174, 179, 168);
}
.exit_sure_content_tip{
    width: 100%;
    height: 20%;
    color: rgb(235, 232, 227);
    font-weight: bolder;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
}

.exit_sure_content_text{
    width: 100%;
    height: 55%;
    /*background-color: #529e2b;*/
    box-sizing: border-box;
    padding: 10px;
    color: rgb(235, 232, 227);
    font-weight: bolder;
    //font-size: clamp(7px,0.45vw,16px);
    font-size: 0.8vw;
    /*border-bottom: 1px dashed black;*/
}
p{
  text-indent: 2em;
}
.exit_sure_content_buttons{
    width: 100%;
    height: 25%;
    display: flex;
  color: white;
    justify-content: space-around;
    /*background-color: #722687;*/
  }
  .exit_sure_content_button{
    width: 30%;
    height: 80%;
    background-color: #575654;
    border-radius: 10px;
    text-align: center;
    line-height: 3.2vh;
    font-size: 0.8vw;
    box-sizing: border-box;
    border: solid black 1px ;
  }
  .exit_sure_content_button:hover{
    background-color: #1d201e;
    cursor:pointer;
    color: rgb(70, 204, 99);
    /*margin-top: 2px;*/
    /*margin-left: 2px;*/
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    /*position: relative;*/
    /*top: 2px;*/
    /*left: 2px;*/
  }
  .exit_sure_content_button:active{
    background-color: #5ef308;
  }


  .bottom_right_content_top{
    width: 39vw;
    height: 37vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #99afc1;
  }
  .bottom_right_content_bottom{
    width: 39vw;
    height: 39vh;
    margin-top: 2vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #99afc1;
  }

  .left_content_top{
    color: white;
    width: 25vw;
    height: 36vh;
    /* background-color: green; */
    border: 1px dashed black;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .left_content_bottom{
    width: 25vw;
    height: 52vh;
    background-color: #4e504f;
    overflow: hidden;
    margin-top: 2vh;
    border: 1px dashed black;
    border-radius: 10px;
    box-sizing: border-box;
   }
  .left_content_top_top{
    width: 25vw;
    height: 14vh;
    background-color: #15d57d;
    //margin-top: 2vh;
    //border: 1px dashed black;
    //border-radius: 10px;
    box-sizing: border-box;
  }
  .left_content_top_bottom{
    width: 25vw;
    height: 22vh;
    background-color: #4d4e4e;
    //margin-top: 2vh;
    box-sizing: border-box;
    //overflow: hidden;
  }
  .mode_info{
    width: 23vw;
    height: 20vh;
    background-color:rgb(128, 131, 131);
    position: relative;
    top: 1vh;
    left: 1vw;
    box-sizing: border-box;
  }
  .mode_info_tip{
    width: 23vw;
    height: 10vh;
    background-color: rgb(88, 90, 90);
    box-sizing: border-box;
    padding: 0.6vw;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .mode_info_tip::-webkit-scrollbar{
    display: none;
  }
  .mode_info_tip span{
    font-size: 0.8vw;
    color: #09fab6;
  }
  .mode_info_tip p{
    font-size: 0.6vw;
    color: #3fe0b3;
  }
  .mode_info_content{
    width: 23vw;
    height: 10vh;
    background-color: #616060;
    box-sizing: border-box;
    padding: 0.6vw;
    font-size: 0.6vw;
    color: #b0e7d7;
    /* text-align: center; */
    /* line-height: 10vh; */
  }
  .left_content_top_bottom_tip{
    width: 25vw;
    height: 5vh;
    //background-color: #709bda;
    text-align: center;
    line-height: 5vh;
    font-size: 1.2vw;
    font-weight: bolder;
    white-space: nowrap;   /*强制不换行*/
    overflow: hidden;  /*溢出隐藏*/
    border-top: 1px dashed black;
  }
  .left_content_top_bottom_content{
    width: 25vw;
    height: 5vh;
    font-size: 0.8vw;
    //background-color: #eacc0a;
  }
  .left_content_top_bottom_content_text{
    width: 25vw;
    height: 11.7vh;
    background-color: #32b3b3;
    font-size: 0.8vw;
    box-sizing: border-box;
    padding: 1vw;
    text-align: left;
    text-indent: 2em;
  }
  .model{
    color: white;
    width: 33.2%;
    height: 5vh;
    float: left;
    text-align: center;
    line-height: 5vh;
    box-sizing: border-box;
  }
  .model:hover{
    cursor: pointer;
    background-color: #41dede;
    /*box-shadow: 1px 1px 1px 1px inset  #32b3b3;;*/
    color: greenyellow;
    font-weight: bolder;
    border-top: 1px dashed black;
    border-right: 1px dashed black;
    border-left: 1px dashed black;
  }
  .model:active{
    color: red;
    background-color: mediumspringgreen;
  }
  .model_1{
    //background-color: #709bda;
  }
  .model_2{
    //background-color: #709bda;
    //margin-left: 2px;
  }
  .model_3{
    //background-color: #709bda;
    //margin-left: 2px;
  }

  .map_title{
    width: 25vw;
    height: 5vh;
    background-color: #4d4f52;
    text-align: center;
    line-height: 5vh;
    font-weight: bolder;
    font-size: 1.2vw;
    white-space: nowrap;   /*强制不换行*/
    overflow: hidden;  /*溢出隐藏*/
  }
  .map_info{
    width: 33.2%;
    height: 9vh;
    /* background-color: #0ae80a; */
    float: left;
    text-align: center;
    line-height: 9vh;
    font-size: 0.7vw;
    white-space: nowrap;   /*强制不换行*/
    overflow: hidden;  /*溢出隐藏*/
  }
  .info_1{
    background-color: #4d4f52;
  }
  .info_2{
    background-color: #4d4f52;
  }
  .info_3{
    background-color: #4d4f52;
  }

  .complete_map{
    width: 100vw;
    height: 100vh;
    background-color: #5d25bf;
    box-sizing: border-box;
    position: relative;
    top: -5vh;
    /* left: calc(50% - 30vw); */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px black;
    border: 1px dashed black;
  }

  .complete_map_title{
    width: 100vw;
    height: 5vh;
    background-color: rgb(252, 253, 253);
    line-height: 5vh;
    text-align: center;
    font-weight: bolder;
    box-sizing: border-box;
    border-bottom: 1px dashed black;
    color: rgb(2, 1, 15);
  }
  .complete_map_shutdown{
    width: 2vw;
    height: 4vh;
    /*background-color: green;*/
    position: relative;
    top: -5vh;
    left: 98vw;
    text-align: center;
    line-height: 4vh;
    font-size: 1vw;
    font-weight: bolder;
    color: rgb(12, 140, 226);
  }
  .complete_map_shutdown:hover{
    cursor: pointer;
    color: red;
    font-size: 1.5vw;
  }
  .complete_map_shutdown:active{
    color: greenyellow;
  }
  .complete_map_content{
    width: 100vw;
    height: 100vh;
    background-color: #8a8c8d;
    position: relative;
    top: -4vh;
  }
  .complete_map_content_left_info{
    width: 33%;
    height: 95vh;
    background-color: rgb(57, 224, 15);
  }
  .complete_map_content_left_info_text{
    width: 97%;
    height: 93vh;
    background-color:  #7c807e;
    box-sizing: border-box;
    position: relative;
    top: 1vh;
    left: 0.5vw;
    font-size: 0.63vw;
    font-weight: normal;
    color: #31d496;
    box-shadow: 0px 0px 2px black;
    /*border: 1px solid black;*/
    padding: 0.5vw;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
.complete_map_content_left_info_text::-webkit-scrollbar{
    display: none;
  }
  .complete_map_content_left_info_text span{
    color: #65e561;
  }
  .complete_map_content_left_info_text strong{
    color: rgb(161, 224, 12);
    font-weight:bolder;
  }
  .complete_map_content_right_map{
    width: 33%;
    height: 93vh;
    background-color: rgb(190, 186, 186);
    position: relative;
    top: -94vh;
    left: 33%;
  }
  .complete_map_content_right_map_tip{
    width: 40vw;
    height: 3vh;
    /* background-color: #0af13f; */
    position: relative;
    top: 0vh;
    left: 0vw;
    font-size: 0.6vw;
    line-height: 3vh;
    box-sizing: border-box;
    padding-left: 0.5vw;
    color: black;
    font-weight: bolder;
    /* text-decoration: underline; */
  }

</style>